<template>
  <div >
    <div style="display: flex">
      <div style="width: 200px;position: fixed ; background-color: white; border-right: 1px solid #b4b4b4;
  backdrop-filter: blur(3px);min-height: 100vh ">
        <div class="logo-head">
          <img src="@/assets/imgs/vue.jpg" alt="" style="width: 100px;margin-top: 10px">
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px">信息管理后台</div>
        </div>
        <div style="width: 100%; padding: 10px;margin: 0px auto;padding-right: 10px; display: flex; align-items: center;">
          <img src="@/assets/imgs/dragon.png" alt="" style="width: 40px; height: 40px">
          <span style="margin-left: 5px" v-if="user.role==='STUDENT'"><span style="font-weight: bolder">学生：</span>{{user.name}}</span>
          <span style="margin-left: 15px" v-if="user.role==='ADMIN'"><span style="font-weight: bolder">管理员：</span>{{user.name}}</span>
        </div>
        <el-menu
            router
            style="border: none"
            :default-active="$route.path"
            :default-openeds="['1','2','3']"
        >
          <el-menu-item index="/homeManage">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-sub-menu index="1" >
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>消息管理</span>
            </template>
            <el-menu-item index="/noticeManage">
              <el-icon><ChatLineSquare /></el-icon>
              <span>通知</span>
            </el-menu-item>
            <el-menu-item index="/articleManage">
              <el-icon><ChatLineSquare /></el-icon>
              <span>交流墙</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>课程管理</span>
            </template>
            <el-menu-item index="/courseManage">
              <el-icon><Document /></el-icon>
              <span>课程信息</span>
            </el-menu-item>
            <el-menu-item index="/selectCourseManage">
              <el-icon><Collection /></el-icon>
              <span>选课记录</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3" >
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/studentIfoManage">
              <el-icon><ChatLineSquare /></el-icon>
              <span>学生信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="personIfoManage" v-if="user.role==='STUDENT'" >
            <el-icon><User /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="/login" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div style="flex: 1;width: 0;background-color: #ffffff; padding: 10px;padding-left: 210px">
        <router-view />
      </div>
    </div>

  </div>
</template>


<script setup>
const user= JSON.parse(localStorage.getItem("student-user"));

import { useRoute } from 'vue-router'
const $route = useRoute()
console.log($route.path)

const logout = () => {
  localStorage.removeItem('student-user')
}
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #dcede9 !important;
}
.el-menu-item:hover {
  color: #5e6469;
}
</style>
<style>
.logo-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid black;
}
</style>